<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/hpp_c1_c2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<%@ include file="/common/meta.jsp" %>
<title>Send Message</title>
<%@ include file="/common/css_js.jsp"%>

	
	<script type="text/javascript">
	
		//long poll
		function receiveMessage(){
			$.ajax({
				type:"POST",  
				url : "command-publish-to-device!receive.action",
				dataType:"json",
				timeout:24000,  //防止由于网络问题, 连接超时
				data:{deviceId:$("#deviceId").val(),timeOut:20000},  //防止浏览器关闭, 服务器还在轮询
				cache : true,
				success : function(infoList) {
					
					$.each(infoList, function(i, info) {
						$("#contentHistory").val($("#contentHistory").val() + "\t\r\t\r"+ info);
					})
					
					receiveMessage();//递归调用
				},
		        complete:function(XMLHttpRequest,textStatus){  
	                if(XMLHttpRequest.readyState=="4"){  
	                	$("#errorMsgSpan").html(XMLHttpRequest.responseText);
	                }  
	        	},  
	            error: function(XMLHttpRequest,textStatus,errorThrown){  
	                if(textStatus=="timeout"){  
	                	receiveMessage();//递归调用
	                }else{
	                	$("#ajaxMessage").text($(this).text()+" out!");
	                	$("#errorMsgSpan").html("error."+textStatus);
	                }
	        	}  
			});
		}	
	
		$(function(){
			
			$("#content").keyup(function(e){
			    var ev = document.all ? window.event : e;
			    if(ev.keyCode==13) {
			    	sendMessage();
			    }
			});
			
			receiveMessage();
			
			/*
			$("#ajaxMessage").ajaxStart(function(){ 
           		$(this).text("准备建立请求.readyState0:"); 
	        }); 
			
	        $("#ajaxMessage").ajaxSend(function(evt, request, settings){ 
	            $(this).text("开始请求,准备发送数据.readyState1:"+request.readyState); 
	        }); 
	        
	        $("#ajaxMessage").ajaxComplete(function(event,request, settings){ 
	            if(request.status==200) 
	                $(this).text("请求完成.readyState4:"+request.readyState); 
	        }); 
	        
	        $("#ajaxMessage").ajaxStop(function(){ 
	            $(this).text("请求结束."); 
	        }); 
			*/
		});
		
		function sendMessage(){
			if($("#content").val()==""){
				return;
			}
			
			$.ajax({
				url : "command-publish-to-device!save.action?deviceId="+$("#deviceId").val()+"&content="+$("#content").val(),
				cache : true,
				dataType : "text",
				async : false,
				success : function(sendStatus) {
					if(sendStatus=="OK"){
						$("#contentHistory").val($("#contentHistory").val() + "\t\r\t\r"+ $("#content").val());
					}else{
						$("#contentHistory").val($("#contentHistory").val() + "\t\r\t\r发送失败: "+ $("#content").val());
					}
					
					$("#content").val("");
				},
				error : function(data) {
					$("#errorMsgSpan").html(data);
				}
			});			
		}
		
		function clickBtn(action,event){
			
			switch(action){
			case "close":
				$(".aniBox",window.parent.document).remove();
				$(".winMask",window.parent.document).remove();
				$(".popup",window.parent.document).remove();

				return;
				
			case "send":
				sendMessage();
				return;
			}
			
		}		
		
	</script>

</head>

<body>
<div class="content"> 

    <div class="pageTitle">Send Message</div>
    <div class="form2">

	  <label id="ajaxMessage"></label>
	  <span class="label" id="errorMsgSpan"></span>
	  <s:actionerror/>
	  <s:fielderror/>
	  <s:actionmessage/> 
	      
      <s:form id="mainForm" name="mainForm" action="command-publish-to-device!save.action" method="post">
      <s:hidden name="deviceId" id="deviceId"></s:hidden>
      
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody><tr>
          <td class="sep"><img style="width:180px;" src="../images/spacer.gif"></td>
          <td class="sep sep2"><img src="../images/spacer.gif"></td>
        </tr>
        
        <tr>
          <td colspan="2"><label class="fLabel">History</label>
            <div class="fField">
              <s:textarea name="contentHistory" id="contentHistory" cssClass="inputTextarea" cssStyle="width:500px; height:300px" readonly="true"></s:textarea>	
            </div></td>
        </tr>
        
        <tr>
          <td colspan="2"><label class="fLabel">Content</label>
            <div class="fField">
              <s:textarea name="content" id="content" cssClass="inputTextarea" cssStyle="width:500px; height:100px"></s:textarea>	
            </div>
         </td>
        </tr>
      </tbody>
      </table>
      
      <div class="btnSet btnSetTypeB">
        <div class="left">
			  <div class="button">
                <div class="left">
                  <div class="right">
                    <input type="button" onclick="clickBtn('send')" value="Send" class="inputButton">
                  </div>
                </div>
              </div>    
            
	          <div class="button">
	            <div class="left">
	              <div class="right">
	                <input type="button" onclick="clickBtn('close')" value="Close" class="inputButton">
	              </div>
	            </div>
	          </div>
          </div>
       </div>
      
      </s:form>
     </div> 
</div>

</body>
</html>